<template>
  <div id="xgsg">
    <table v-if="stock != ''">
      <thead>
        <tr>
          <td width="12%">星期</td>
          <td width="18%">时间</td>
          <td width="18%">代码</td>
          <td width="18%">名称</td>
          <td width="18%">发行价</td>
          <td width="18%">申购上限</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in stock" :key="index">
          <td>{{ item.publTimeStamp | formatWeek }}</td>
          <td>{{ item.publDate | formatDay("YYYY/MM/DD") }}</td>
          <td>{{ item.applyCodeOnline }}</td>
          <td>{{ item.issueNameAbbrOnline }}</td>
          <td style="color: #02e2f4">{{ item.issuePrice | fixed2 }}</td>
          <td style="color: #ea2827">{{ item.applyMaxOnline | wangu }}</td>
        </tr>
      </tbody>
    </table>
    <div class="zwsj" v-else>
      <img src="../image/wushuju.png" alt="" />
    </div>
  </div>
</template>
<script>
import format from "date-fns/format";
import { getStock } from "../api/index";
export default {
  data() {
    return {
      stock: [],
    };
  },
  mounted() {
    this.newStock();
  },
  filters: {
    formatMoney(val) {
      if (val != "——") {
        return (val / 100000000).toFixed(2) + "亿";
      } else {
        return "——";
      }
    },
    formatStock(val) {
      return val.replace(/-?\d+$/, "");
    },
    wangu: function (val) {
      if (!val) return "";
      val = val / 10000;
      return Number(val).toFixed(2) + "万股";
    },
    formatHold(val) {
      if (val != "——") {
        return Math.floor(val * 100) / 100 + "%";
      } else {
        return "——";
      }
    },
    formatDay(val, reg) {
      if (val != "——") {
        return format(val, reg);
      } else {
        return "——";
      }
    },
    fixed2: function (val) {
      if (val != "——") {
        return Number(val).toFixed(2) + "元";
      } else {
        return "——";
      }
    },
    formatHold(val) {
      if (val != "——") {
        return Math.floor(val * 100) / 100 + "%";
      } else {
        return "——";
      }
    },
    formatWeek(val) {
      if (val != "——") {
        return "周" + "日一二三四五六".charAt(new Date(val).getDay());
      } else {
        return "——";
      }
    },
  },
  methods: {
    formatStock(data) {
      return data.map((item, index) => {
        Object.keys(item).forEach((key) => {
          const param = data[index][key];
          data[index][key] = param ? param : "——";
        });
        return item;
      });
    },
    async newStock() {
      const send = {
        type: 1,
      };
      const data = await getStock(send);
      if (data != null) {
        this.stock = this.formatStock(data);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#xgsg {
  box-sizing: border-box;
  margin: 0 auto;
  width: 1200px;
  background: #090910;
  border: 1px solid #323337;
  box-sizing: border-box;
  table {
    width: 100%;
    font-weight: 400;
    text-align: left;
    font-size: 15px;
    border: 1px solid #323337;
  }
  table thead {
    height: 32px;
    line-height: 32px;
    color: #ffffff;
    font-weight: bold;
    background: #232429;
  }
  table thead tr td {
    padding-left: 16px;
    border: 1px solid #323337;
  }
  table tbody {
    height: 42px;
    color: #bcbfc4;
    line-height: 42px;
  }

  table tbody tr td {
    padding-left: 16px;
    border: 1px solid #25262a;
  }
  .zwsj {
    text-align: center;
    img {
      width: 406px;
      height: 238px;
      margin-top: 76px;
    }
  }
}
</style>
